import QtQuick 2.0


Item {
    id: settingSelector
    anchors.top: content.top
    anchors.topMargin: 5
    anchors.left: content.left
    anchors.leftMargin: 5
    width: content.width - 10
    height: content.height - 10

    function reset() {
        theme.visible = false;
        units.visible = false;
        location.visible = false;
        
        themeBtn.opacity = 1.0;
        unitsBtn.opacity = 1.0;
        locationBtn.opacity = 1.0;
    }
    
    Row {
        anchors.left: parent.left
        anchors.leftMargin: 38
        anchors.top: parent.top
        anchors.topMargin: 60
        Grid {
            width: settingSelector.width - 550
            height: settingSelector.height - 120
            columns: 5
            rows: 3
            spacing: 45
            Button {
                id: themeBtn
                img: "images/themes.png"
                text: "Themes"
                onClicked: {
                    theme.visible = true;
                    units.visible = false;
                    location.visible = false;
                    
                    themeBtn.opacity = 1.0;
                    unitsBtn.opacity = 0.5;
                    locationBtn.opacity = 0.5;
                }
            }
            Button {
                id: unitsBtn
                img: "images/units.png"
                text: "Units"
                onClicked: {
                    theme.visible = false;
                    units.visible = true;
                    location.visible = false;
                    
                    themeBtn.opacity = 0.5;
                    unitsBtn.opacity = 1.0;
                    locationBtn.opacity = 0.5;
                }
            }
            Button {
                id: locationBtn
                img: "images/location.png"
                text: "Location"
                onClicked: {
                    theme.visible = false;
                    units.visible = false;
                    location.visible = true;
                    
                    themeBtn.opacity = 0.5;
                    unitsBtn.opacity = 0.5;
                    locationBtn.opacity = 1.0;
                }
            }
        }
        Column {
            id: theme
            spacing: 10
            visible: false
            Row {
                spacing: 10
                Button {
                    id: greenThemeImg
                    img: "images/green_theme.png"
                    width: 96
                    height: 96
                    onClicked: {
                        myKit.setGreenTheme();
                        settings.setValue("settings/" + userSelection.loggedUser + "/theme", "greenTheme");
                    }
                }
                Text {
                    id: greenThemeTxt
                    anchors.verticalCenter: greenThemeImg.verticalCenter
                    font.pointSize: 18
                    font.family: "Verdana"
                    color: "#FF000000"
                    text: "Green Theme"
                }
            }
            Row {
                spacing: 10
                Button {
                    id: redThemeImg
                    img: "images/red_theme.png" 
                    width: 96
                    height: 96
                    onClicked: {
                        myKit.setRedTheme();
                        settings.setValue("settings/"  + userSelection.loggedUser + "/theme", "redTheme");
                    }
                }
                Text {
                    id: redThemeTxt
                    anchors.verticalCenter: redThemeImg.verticalCenter
                    font.pointSize: 18
                    font.family: "Verdana"
                    color: "#FF000000"
                    text: "Red Theme"
                }
            }
            Row {
                spacing: 10
                Button {
                    id: blueThemeImg
                    img: "images/blue_theme.png" 
                    width: 96
                    height: 96
                    onClicked: {
                        myKit.setBlueTheme();
                        settings.setValue("settings/" + userSelection.loggedUser + "/theme", "blueTheme");
                    }
                }
                Text {
                    id: blueThemeTxt
                    anchors.verticalCenter: blueThemeImg.verticalCenter
                    font.pointSize: 18
                    font.family: "Verdana"
                    color: "#FF000000"
                    text: "Blue Theme"
                }
            }
        }
        Column {
            id: units
            spacing: 10
            visible: false
            Text {
                font.pointSize: 24
                font.family: "Verdana"
                color: "#FF000000"
                text: "Temperature:" 
            }
            RadioButton {
                id: tempRadio
                button1: "Fahrenheit"
                button2: "Celsius"
                onClicked: {
                    // btnIdx = 0  -->  Fahrenheit
                    // btnIdx = 1  -->  Celsius
                    if(btnIdx == 0) myKit.tempUnit = "F";
                    else myKit.tempUnit = "C";

                    settings.setValue("settings/" + userSelection.loggedUser + "/tempUnit", myKit.tempUnit);
                    settings.setValue("settings/" + userSelection.loggedUser + "/tempRadio", btnIdx);
                    
                    weatherContent.updateCurrentWeather();
                    weatherContent.update5DayForecast();
                    appliancesContent.temperatureUnit = myKit.tempUnit;
                    appliancesContent.convertTemperature();
                }

                onVisibleChanged: {
                    var idx = settings.getValue("settings/" + userSelection.loggedUser + "/tempRadio", 0);
                    tempRadio.toggle( idx );
                }
            }
            Item {
                height: 25
                width: parent.width
            }
            Text {
                font.pointSize: 24
                font.family: "Verdana"
                color: "#FF000000"
                text: "Distance:" 
            }
            RadioButton {
                id: distRadio
                button1: "mi / ft / in"
                button2: "km / m / mm"
                onClicked: {
                    // btnIdx = 0  -->  mi, ft, in
                    // btnIdx = 1  -->  km, m, mm
                    if(btnIdx == 0) myKit.distUnit = "mi/ft/in";
                    else myKit.distUnit = "km/m/mm";
                    
                    settings.setValue("settings/" + userSelection.loggedUser + "/distanceUnit", myKit.distUnit);
                    settings.setValue("settings/" + userSelection.loggedUser + "/distRadio", btnIdx);
                    weatherContent.updateCurrentWeather();
                }

                onVisibleChanged: {
                    var idx = settings.getValue("settings/"  + userSelection.loggedUser + "/distRadio", 0);
                    distRadio.toggle( idx );
                }
            }
            Item {
                height: 25
                width: parent.width
            }
            Text {
                font.pointSize: 24
                font.family: "Verdana"
                color: "#FF000000"
                text: "Speed:" 
            }
            RadioButton {
                id: speedRadio
                button1: "mph"
                button2: "kmph"
                onClicked: {
                    // btnIdx = 0  -->  mph
                    // btnIdx = 1  -->  kmph
                    if(btnIdx == 0) myKit.speedUnit = "mph";
                    else myKit.speedUnit = "kmph";
                    
                    settings.setValue("settings/" + userSelection.loggedUser + "/speedUnit", myKit.speedUnit);
                    settings.setValue("settings/" + userSelection.loggedUser + "/speedRadio", btnIdx);
                    weatherContent.updateCurrentWeather();
                }

                onVisibleChanged: {
                    var idx = settings.getValue("settings/" + userSelection.loggedUser + "/speedRadio", 0);
                    speedRadio.toggle( idx );
                }
            }
        }
        Row {
            id: location
            spacing: 10
            visible: false
            Text {
                font.pointSize: 24
                font.family: "Verdana"
                color: "#FF000000"
                text: "Location:"

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        startSpeechRecognition("zipcode", false, zipCode, zipCode, zipCode.color, 3000);
                    }
                }
            }
            Text {
                id: zipCode

                property string speechText

                font.pointSize: 24
                font.family: "Verdana"
                color: "#FF000000"
                text: speechText
                onTextChanged: {
                    settings.setValue("settings/" + userSelection.loggedUser + "/zipcode", speechText);
                    weatherContent.zipcode = speechText;
                    weatherContent.updateLocation();
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        startSpeechRecognition("zipcode", false, zipCode, zipCode, zipCode.color, 2000);
                        zipCode.color = "red";
                    }
                }

                onVisibleChanged: {
                    speechText = settings.getValue("settings/" + userSelection.loggedUser + "/zipcode");
                    if( speechText === "" ) speechText = "60657";
                }
            }

        }
    }
}
